<template>
    <div class="footer">
        <div @click="tabsClick('home')" class="isActive" ref="home">
            <House></House>首页
        </div>
        <div @click="tabsClick('my')" ref="my">
            <User></User>我的
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { User, House } from '@element-plus/icons-vue';
/**
 * @Author dingxing [2023-03-02 09:47:47]
 * @Description 
 */
const $router = useRouter();
const home = ref(null);
const my = ref(null);
const tabsClick = (type) => {
    localStorage.setItem('tabTagName', type);
    setItem(type);
};
const setItem = (type) => {
    if (type == 'home') {
        home.value.classList.add('isActive');
        my.value.classList.remove('isActive');
        $router.push({
            path: '/home',
        });
    } else {
        my.value.classList.add('isActive');
        home.value.classList.remove('isActive');
        $router.push({
            path: '/my',
        });
    }
};
onMounted(() => {
    let name = localStorage.getItem('tabTagName') || 'home';
    setItem(name);

});
</script>

<style lang="less" scoped>
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.8rem;
    display: flex;
    justify-content: space-around;
    background: rgb(247, 245, 245);
    font-size: 0.28rem;
    div {
        height: 100%;
        display: flex;
        align-items: center;
        &.isActive {
            color: #1bb2e9;
            font-weight: bold;
        }

      :deep(svg){
            width: 0.3rem;
        }
    }
}
</style>